<template>
  <div class="recharge">
    <header-bar tittle="充值" />

    <div class="bg"></div>

    <div class="title-box">
      <div class="title">充值金额</div>

      <div class="input-box u-flex">
        <div class="name">￥</div>
        <input
          v-model="text"
          type="number"
          placeholder="请输入整数金额（元）"
        />
      </div>
    </div>

    <div class="main-box">
      <div class="title">选择充值方式</div>

      <div class="list">
        <div class="item u-flex-bet" @click="radio = '1'">
          <div class="info-box u-flex">
            <van-image
              width="68rem"
              height="68rem"
              :src="require('@/assets/images/recharge/icon_zfb@2x.png')"
            />

            <div class="name">支付宝</div>
          </div>

          <div class="select">
            <van-image
              v-if="radio != 1"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/icon_unselect@2x.png')"
            />

            <van-image
              v-if="radio == 1"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/select.png')"
            />
          </div>
        </div>

        <!-- 微信支付 未开通 暂时注释 -->
        <div class="item u-flex-bet" @click="radio = '2'">
          <div class="info-box u-flex">
            <van-image
              width="68rem"
              height="68rem"
              :src="require('@/assets/images/recharge/icon_wx@2x.png')"
            />

            <div class="name">微信支付</div>
          </div>

          <div class="select">
            <van-image
              v-if="radio != 2"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/icon_unselect@2x.png')"
            />

            <van-image
              v-if="radio == 2"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/select.png')"
            />
          </div>
        </div>

        <div class="item u-flex-bet" @click="radio = '3'">
          <div class="info-box u-flex">
            <van-image
              width="68rem"
              height="68rem"
              :src="require('@/assets/images/recharge/icon_payex@2x.png')"
            />

            <div class="name">payex国际支付</div>
          </div>

          <div class="select">
            <van-image
              v-if="radio != 3"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/icon_unselect@2x.png')"
            />

            <van-image
              v-if="radio == 3"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/select.png')"
            />
          </div>
        </div>

        <div class="item u-flex-bet" @click="radio = '5'">
          <div class="info-box u-flex">
            <van-image
              width="68rem"
              height="68rem"
              :src="require('@/assets/images/recharge/icon_paypal@2x.png')"
            />

            <div class="name">paypal</div>
          </div>

          <div class="select">
            <van-image
              v-if="radio != 5"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/icon_unselect@2x.png')"
            />

            <van-image
              v-if="radio == 5"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/select.png')"
            />
          </div>
        </div>

        <div class="item u-flex-bet" @click="radio = '4'">
          <div class="info-box u-flex">
            <van-image
              width="68rem"
              height="68rem"
              :src="require('@/assets/images/recharge/icon_xxzf@2x.png')"
            />

            <div class="name">线下充值</div>
          </div>

          <div class="select">
            <van-image
              v-if="radio != 4"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/icon_unselect@2x.png')"
            />

            <van-image
              v-if="radio == 4"
              width="32rem"
              height="32rem"
              :src="require('@/assets/images/recharge/select.png')"
            />
          </div>
        </div>
      </div>

      <div class="upload" v-if="radio == 4">
        <div class="uploadCo">
          <div class="icon u-flex-center" v-if="!fileList[0]">
            <van-image
              width="76rem"
              height="76rem"
              :src="require('@/assets/images/step1/icon_photo@2x.png')"
            />
          </div>
          <van-uploader
            :style="fileList[0] ? 'opacity: 1' : 'opacity: 0'"
            v-model="fileList"
            multiple
            :before-read="beforeRead"
            :max-count="1"
          />
        </div>
      </div>

      <div class="tips-box" v-if="radio == 4">
        <div class="tips" @click="go()">
          线下充值请完成对公账户转账后通知客服，帮助您完成充值
          <font style="color: #349BD7;" @click="go(1)">点击查看</font>
        </div>

        <!-- <div class="tips">
          <span>点击查看</span>
          线下充值账户和客户联系方式
        </div> -->
      </div>
    </div>

    <div class="btn-box" @click="recharge">
      <div class="btn">充值</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import * as imageConversion from "image-conversion";
import { Field } from "vant";
import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  Uploader,
  sticky,
  Form,
  RadioGroup,
  Radio,
} from "vant";
import { API_PATH } from "@/api/index.js";
import { getLocalStorage } from "@/util/local-storge.js";
import { WALL_RECHARGE, TASK_UPLOAD } from "@/api/api.js";
import axios from "axios";
// import { Field } from 'vant';
Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Uploader);
Vue.use(sticky);
Vue.use(Form);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Toast);
export default {
  name: "recharge",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      text: "",
      img: require("../.././assets/images/alipay.png"),
      radio: "1",
      fileList: [],
    };
  },
  mounted() {},
  methods: {
    go(type) {
      this.$router.push({ name: "article", query: { id: 11 } });
    },
    async recharge() {
      if (this.text == "") {
        Toast("请填写充值金额!");
        return;
      }
      if (this.radio != 4) {
        let datas = {
          amount: this.text,
          channel: this.radio,
          source_account: "12312",
        };

        // window.location.href="http://localhost:8080/#/index?id=3&charset=utf8&out_trade_no=161241739792742&method=alipay.trade.wap.pay.return&total_amount=0.01&sign=RM5S9p%2FZcyg%2FcK0ZrvQ7hyld8tak38%2BIhLZ%2FOgeGtL3AMfD8WDPDARA0z8XGQQldQ%2B5lyO8O1OECBsPgJ0I2nHwmkJqmTheJgJKmAAttOP4KnrkFyTSd3%2F9LkXFusjC3yNbwCuukdQcYr%2FckLiU7vzb149rralZuYTgq0LF8ooQyE43sES%2BCCRPiuXiCiJFXmRi5PXbicgdEJ2D2cBYTML3iQEtpkZONJ0UV8b2V7NRrEE30lpgMEf5GiLWw9ngQkXdn6Aniv5ai3FeNPIpf7kn5Davz35Y8rek9CRJoo4BLY90qbpj%2BO9%2BCbHRl224%2BRfcQjO24rJm9rSAm6%2FYMrA%3D%3D&trade_no=2021020422001414201432593202&auth_app_id=2021002125699282&version=1.0&app_id=2021002125699282&sign_type=RSA2&seller_id=2088202553555370&timestamp=2021-02-04%2013%3A43%3A31";
        const { data } = await this.$reqPost(WALL_RECHARGE, datas);
        if (data.status == 1) {
          let url = data.data.redirect;
          // window.location.href = "http://" + url;
          axios.get("https://" + url).then((res) => {
            console.log(res);
          });
        }
        if (data.status == 0) {
          Toast(data.info);
        }
      } else {
        if (!this.fileList[0]) {
          Toast("请上传图片！");
          return;
        }
        let a = this.fileList[0].file;
        let param = new FormData();
        param.append("file", a);
        let that = this;
        // let file = JSON.parse(JSON.stringify(this.fileList));
        axios
          .post(`${API_PATH + TASK_UPLOAD}`, param, {
            headers: {
              "Content-Type": "multipart/form-data",
              "auth-token": getLocalStorage("user_token").user_token,
            },
          })
          .then(
            function(res) {
              console.log(res);
              if (res.data.status == 1) {
                that.publish(res.data.data.filename);
              }
            },
            function(response) {}
          );
      }
    },
    async publish(param) {
      let datas = {
        amount: this.text,
        channel: this.radio,
        source_account: "12312",
        verify_img: param,
      };

      // window.location.href="http://localhost:8080/#/index?id=3&charset=utf8&out_trade_no=161241739792742&method=alipay.trade.wap.pay.return&total_amount=0.01&sign=RM5S9p%2FZcyg%2FcK0ZrvQ7hyld8tak38%2BIhLZ%2FOgeGtL3AMfD8WDPDARA0z8XGQQldQ%2B5lyO8O1OECBsPgJ0I2nHwmkJqmTheJgJKmAAttOP4KnrkFyTSd3%2F9LkXFusjC3yNbwCuukdQcYr%2FckLiU7vzb149rralZuYTgq0LF8ooQyE43sES%2BCCRPiuXiCiJFXmRi5PXbicgdEJ2D2cBYTML3iQEtpkZONJ0UV8b2V7NRrEE30lpgMEf5GiLWw9ngQkXdn6Aniv5ai3FeNPIpf7kn5Davz35Y8rek9CRJoo4BLY90qbpj%2BO9%2BCbHRl224%2BRfcQjO24rJm9rSAm6%2FYMrA%3D%3D&trade_no=2021020422001414201432593202&auth_app_id=2021002125699282&version=1.0&app_id=2021002125699282&sign_type=RSA2&seller_id=2088202553555370&timestamp=2021-02-04%2013%3A43%3A31";
      const { data } = await this.$reqPost(WALL_RECHARGE, datas);
      let that = this;
      if (data.status == 1) {
        Toast.success({
          message: data.info,
          onClose: function() {
            that.$router.push("home");
          },
        });
      } else {
        Toast.fail(data.info);
      }
    },

    beforeRead(file) {
      // 上传之前校验
      return new Promise((resolve, reject) => {
        // console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        console.log("压缩前", file);
        imageConversion
          .compressAccurately(file, 30)
          .then((res) => {
            // console.log(res)
            res = new File([res], file.name, {
              type: res.type,
              lastModified: Date.now(),
            });
            console.log("压缩后", res);
            resolve(res);
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recharge {
  min-height: 100vh;
  background-color: #f5f5f5;
  text-align: left;

  .bg {
    position: absolute;
    height: 464rem;
    background: linear-gradient(
      180deg,
      #2f81fe 80%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .title-box {
    background-color: #fff;
    position: relative;
    margin: 0 24rem;
    border-radius: 20rem;
    overflow: hidden;
    padding: 24rem;
    font-size: 32rem;

    .title {
      margin-bottom: 28rem;
      font-weight: bold;
    }

    .input-box {
      border-bottom: 2rem solid #eaeaea;
      padding-bottom: 16rem;

      .name {
        font-weight: bold;
      }

      input {
        margin-left: 16rem;
      }
    }
  }

  .main-box {
    margin: 0 24rem;
    padding: 24rem;
    background: #fff;
    position: relative;
    border-radius: 20rem;
    margin-top: 24rem;

    .title {
      font-size: 32rem;
      font-weight: bold;
    }

    .list {
      .item {
        border-bottom: 2rem solid #f8f8f8;
        padding: 18rem 0 24rem;

        &:last-child {
          border-bottom: 0 solid #000;
        }
        .info-box {
          .name {
            font-size: 32rem;
            margin-left: 24rem;
          }
        }
      }
    }

    .upload {
      text-align: left;
      margin-top: 48rem;

      .uploadCo {
        position: relative;
        width: 160rem;
        height: 160rem;

        .icon {
          position: absolute;
          width: 160rem;
          height: 160rem;
          border: 2rem dashed #cccfd4;
          border-radius: 12rem;
          background-color: #f6f6f6;
        }
        .van-uploader {
          position: absolute;
          opacity: 1;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
    }

    .tips-box {
      color: #999;
      font-size: 24rem;
      margin-top: 24rem;

      .tips {
        margin-bottom: 10rem;

        &:last-child {
          margin-bottom: 0;
        }
      }

      span {
        color: var(--theme);
      }
    }
  }

  .btn-box {
    height: 88rem;
    text-align: center;
    background: linear-gradient(145deg, #2cb1ff 0%, #2f81fe 100%);
    color: #fff;
    font-size: 32rem;
    line-height: 88rem;
    border-radius: 44rem;
    margin: 96rem 24rem 0;
    .btn {
      width: 100%;
    }
  }
}
</style>
